<template>
    <div>
        <div>
            <el-table :data="articles" stripe border :highlight-current-row="true" height="650px">
                <el-table-column width="50px" type="index" label="序号"></el-table-column>
                <el-table-column width="150px" prop="title" label="标题" align="center">
                    <template slot="header" slot-scope="scope">
                        标题<el-input clearable v-model="query.title" @change="searchTitle" size="medium"
                            placeholder="输入关键字搜索" />
                    </template>
                </el-table-column>
                <el-table-column width="180px" prop="cover" label="封面" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" style="width: 140px;height: 150px;" />
                    </template>
                </el-table-column>
                <el-table-column width="100px" prop="name" label="作者" align="center"></el-table-column>
                <el-table-column width="100px" prop="type" label="分类" align="center"></el-table-column>

                <el-table-column width="100px" prop="isPub" label="审核状态" align="center">
                    <template slot="header" slot-scope="scope">
                        <el-select clearable v-model="query.isPub" @change="searchState($route.name)">
                            <el-option value="全部">全部</el-option>
                            <el-option value="通过">通过</el-option>
                            <el-option value="未通过">未通过</el-option>
                        </el-select>
                    </template>
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.state === '通过' ? 'success' : 'danger'" disable-transitions>{{
                            scope.row.state === "通过" ? '通过' : '未通过' }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column width="300px" label="操作">
                    <template slot="header" slot-scope="scope">
                        <el-button type="primary" @click="stateAndTitle($route.name)">联合查询</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleStatus(scope.$index, scope.row, $route.name)">{{
                            scope.row.state ===
                            '通过'
                            ? '未通过' : '通过' }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页组件-->
        <div>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page=pageInfo.currentPage :page-count=4 layout="total, prev, pager, next, jumper"
                :total=pageInfo.total>
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getParties, queryByStateAndTitle, getPartyContent } from '../../api/party.js'
export default ({
    name: 'PartyMain',
    data() {
        return {
            parties: [],
            query: {
                title: '',
                state: ''
            },
            pageInfo: {
                currentPage: 1,
                total: 300
            },
            articles:[],
            article:{
                id:'',
                title:'',
                cover:'',
                name:'',
                type:'',
                isPub:''
            }
        }
    },
    mounted() {
        //分页获取全部漫展活动
        var data = {
            currentPage: this.pageInfo.currentPage,
        }
        this.getAllParties(data)
    },
    methods: {
        getAllParties(data) {
            getParties(data).then(res => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                    return;
                }
                this.parties = res.data.data.records
                this.pageInfo.total = Number(res.data.data.total)
            }).catch(error => {
                this.$message({
                    type: 'error',
                    message: '请求接口出错'
                })
            })
        },
        getPartiesByCondition(data) {
            queryByStateAndTitle(data).then(res => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                    return;
                }
                this.parties = res.data.data.records
                this.pageInfo.total = Number(res.data.data.total)
            }).catch(error => {
                this.$message({
                    type: 'error',
                    message: '请求接口出错'
                })
            })
        },
        //标题关键字搜索
        searchTitle() {
            var data = {
                title: this.query.title,
                currentPage: 1,
                state: this.query.state
            }
            //将当前页码置为1
            this.pageInfo.currentPage = 1
            this.getPartiesByCondition(data)
        },
        //状态搜索
        searchState() {
            // alert(this.query.state)
            //分页获取全部漫展活动
            var data = {
                currentPage: 1,
                state: this.query.state,
                title: this.query.title
            }
            this.pageInfo.currentPage = 1
            this.getPartiesByCondition(data)
        },
        //状态和标题联合查询
        stateAndTitle() {
            alert("状态和标题联合查询")
        },
        //编辑
        handleEdit(index, row) {
            var partyshow = {
                info: JSON.parse(JSON.stringify(row)),
                content: ''
            }
            // alert("编辑")
            getPartyContent(JSON.parse(JSON.stringify(row)).id).then(res => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                    return;
                }
                // console.log(res.data.msg);
                partyshow.content = res.data.msg

                this.$router.push({
                    path: '/partyAdd',
                    query: partyshow
                })
                // console.log(partyshow.content);
            }).catch(error => {
                this.$message({
                    type: 'error',
                    message: '请求接口出错'
                })
            })
        },
        //切换状态
        handleStatus() {
            alert("切换状态")
        },
        handleSizeChange() {
            alert("每页大小改变")
        },
        handleCurrentChange(value) {
            // alert("当前页改变")
            this.pageInfo.currentPage = value
            //分页获取全部漫展活动
            var data = {
                currentPage: this.pageInfo.currentPage,
                title: this.query.title,
                state: this.query.state
            }
            this.getPartiesByCondition(data)
        }

    }
})
</script>
<style scoped></style>